<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        #body1 {
            background-color: #F0F0F0;
        }

        #main3 {
            margin-top: 20px;
            width: 90%;
            height: 600px;

        }

    </style>


    <script type="text/javascript" src="../../common/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="../../common/echars/echarts.min.js"></script>
    <!--
        1.引入jquery
        2.写一个echart 布局
        3.初始化echarts
    -->
    <script type="text/javascript">
        /**
         *充值统计
         */
        var months;
        var values;
        $(function () {
            $.ajax({
                url: "/GetOrderNearYearMonthsCountServlet",
                type: 'post',
                dataType: 'json',
                success: function (result) {
                    var values = result.data.values;
                    var months = result.data.months;

                    // 使用刚指定的配置项和数据显示图表。
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main3'));
                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '充值统计'
                        },
                        tooltip: {////触发类型；轴触发，item则鼠标hover到折线点显示相应数据，
                            trigger: 'axis'
                        },
                        xAxis: {
                            type: 'category',  //表明 x轴数据是离散的，分类的
                            data: months
                        },
                        yAxis: {
                            type: 'value'  // y轴数值类型
                        },
                        series: [{
                            name:'充值统计',
                            stack: '充值订单数',
                            data: values,
                            type: 'line'
                        }]
                    };
                    myChart.setOption(option);
                }
            })
        })
    </script>
</head>
<body>

<body id="body1">
<center>
    <div id="main3"></div>
</center>
</body>

</body>
</html>